import * as api from '@/services/vpnServerCheck';
import { PageContainer } from '@ant-design/pro-components';
import { ProFormInstance } from '@ant-design/pro-form';
import type { ActionType, ProColumns } from '@ant-design/pro-table';
import ProTable from '@ant-design/pro-table';
import { Popconfirm, Tag } from 'antd';
import React, { useRef, useState } from 'react';
import { useModel } from 'umi';
import CheckReportForm from '../VpnServerCheckLog/CheckReportForm';

const OrderList: React.FC = () => {
  const actionRef = useRef<ActionType>();
  const formRef = useRef<ProFormInstance>();

  const { hasRight } = useModel('useAuthModel');

  const [formCheckReportVisible, setFormCheckReportVisible] =
    useState<boolean>(false);
  const [currentVer, setCurrentVer] = useState<string | undefined>(undefined);

  const handleSubmit = async (ver: string | undefined) => {
    let data = {
      recheckVer: ver,
    };
    const result = await api.update(data);
    if (result && result.success) {
      actionRef?.current?.reload();
    }
  };

  let columns: ProColumns<API.VpnServerCheck>[] = [
    {
      title: '版本',
      dataIndex: 'ver',
      width: 200,
      sorter: true,
      render: (_, record) => {
        return (
          <>
            <div>{record.ver}</div>
            {record.checkConfig?.uncheckBlock == true ? (
              <Tag color="blue">不检测被墙</Tag>
            ) : (
              ''
            )}
          </>
        );
      },
    },
    {
      title: '分组',
      dataIndex: 'groupNames',
      search: false,
      sorter: true,
      render: (_, record) => {
        return record.groupNames?.map((val) => {
          return <Tag color="blue">{val}</Tag>;
        });
      },
    },
    {
      title: '服务器',
      dataIndex: 'instanceIds',
      search: false,
      sorter: true,
      render: (_, record) => {
        return record.instanceIds?.map((val) => {
          return <Tag color="blue">{val}</Tag>;
        });
      },
    },
    {
      title: '指定检测服务器',
      dataIndex: 'checkers',
      search: false,
      sorter: true,
      render: (_, record) => {
        return record.checkers?.map((gc) => {
          return (
            <Tag color="blue">
              {gc.name} [{gc.ip}]
            </Tag>
          );
        });
      },
    },
    // {
    //   title: '备注',
    //   dataIndex: 'remark',
    //   valueType: 'textarea',
    //   search: false,
    //   ellipsis: true,
    // },
    {
      title: '创建时间',
      dataIndex: 'createTime',
      align: 'center',
      width: 150,
      search: false,
      sorter: true,
    },
    {
      title: '创建人',
      align: 'center',
      width: 120,
      dataIndex: 'createUser',
      sorter: false,
      search: false,
    },
  ];

  columns = columns.concat([
    {
      title: '操作',
      dataIndex: 'option',
      valueType: 'option',
      width: 180,
      render: (_, record) => {
        let cmps = [];
        if (hasRight('vpnservercheck_list')) {
          cmps.push(
            <Popconfirm
              key="delete"
              title="确定要重新检测吗?"
              onConfirm={async () => {
                await handleSubmit(record.ver);
              }}
            >
              <a>重新检测</a>
            </Popconfirm>,
          );
        }

        if (hasRight('vpnservercheck_list')) {
          cmps.push(
            <a
              key="check_report"
              onClick={() => {
                setCurrentVer(record.ver);
                setFormCheckReportVisible(true);
              }}
            >
              检测结果
            </a>,
          );
        }

        return cmps;
      },
    },
  ]);

  return (
    <PageContainer>
      <ProTable
        rowKey="id"
        actionRef={actionRef}
        formRef={formRef}
        search={{
          defaultCollapsed: false,
        }}
        options={{
          fullScreen: false,
          reload: true,
          setting: false,
          density: false,
        }}
        columns={columns}
        pagination={{
          defaultPageSize: 30,
          pageSizeOptions: ['15', '30', '60', '100'],
          hideOnSinglePage: true,
          // current: pageCurrent,
          // total: totalCount,
        }}
        request={api.list}
      />
      <CheckReportForm
        visible={formCheckReportVisible}
        ver={currentVer}
        groupId={undefined}
        onCancel={() => {
          setFormCheckReportVisible(false);
        }}
        onCancelAndReload={() => {
          setFormCheckReportVisible(false);
          actionRef.current?.reload();
        }}
      />
    </PageContainer>
  );
};

export default OrderList;
